<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="Keywords" content="">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="./css/normalize.css">
        <link rel="stylesheet" href="./css/base.css">
        <link rel="stylesheet" href="./css/public.css">
        <link rel="stylesheet" href="./css">
        <style>
            .box{
                width: 100px;
                height: 100px;
                background: hotpink;
                transition: 0.5s;
            }
            .box:hover{
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box">fff</div>
    </body>
</html>
<script src=""></script>
<script type="text/javascript">
    var box = document.querySelector('.box');
    // box.addEventListener('transitionend',function () {
    //     console.log(123);
    //     box.innerHTML = "456";
    //   });
    box.addEventListener('transitionend',function () {
        console.log(123);
      });
</script>